<template>
	<view class="content">
		<div class="head">
			<div class="Hleft">动漫APP</div>
			<div class="Hright">
				<image src="/static/ss.png" alt="" @click="goSearch()"></image>
				<image src="/static/fl.png" alt="" @click="fl"></image>
			</div>
		</div>

		<view class="fl" v-show="flShow">
			<uni-tag :text="item.title?item.title:''" inverted="true" type="primary" :circle="false" size="small"
				color="red" v-for="item in fllist" :key="item.index" @click="goList(item.tagId)"></uni-tag>
		</view>


		<div class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item in banners" :key="item.index">
					<view class="swiper-item">
						<image :src="item.image_url" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</div>


		<view class="tj">

			<view class="tt">
				<image src="/static/tj.png" alt="" /> {{Tuijian[0].title}}
			</view>

			<view class="tjCon">
				<view class="item" v-for="item in Tuijian[0].topics" :key="item.index" @click="goDetails(item.id)">
					<image :src="item.cover_image_url" alt="" mode="" />
					<view class="txt">
						<view class="t1">
							{{item.title}}
						</view>
						<view class="info">
							{{item.description}}
						</view>
					</view>
				</view>
			</view>

		</view>



		<view class="tj">
			<view class="tt">
				<image src="/static/tj.png" alt="" /> {{Tuijian[1].title}}
			</view>

			<view class="tjCon">
				<view class="item" v-for="item in Tuijian[1].topics" :key="item.index" @click="goDetails(item.id)">
					<image :src="item.cover_image_url" alt="" />
					<view class="txt">
						<view class="t1">
							{{item.title}}
						</view>
						<view class="info">
							{{item.description}}
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banners: [],
				Tuijian: '',
				flShow: false,
				fllist: []
			}
		},
		onLoad() {

			//ifdef H5
			uni.request({
				url: '/dpc/v2/pweb/home',
				success: (res) => {
					console.log(res.data)
					this.banners = res.data.data.banners
					this.Tuijian = res.data.data.discovery_modules
					this.fllist = res.data.data.categories
					// 接口无数据了
					this.banners = [{
							image_url: 'https://f2.kkmh.com/image/220821/VGyFspqBh.webp-w750.jpg'
						},
						{
							image_url: 'https://f2.kkmh.com/image/220821/VWy4C5MpL.webp-w750.jpg'
						},
						{
							image_url: 'https://f2.kkmh.com/image/221103/XqszckmMd.webp-w750.jpg'
						},
					]
				}
			})
			//endif


			//ifdef APP-PLUS
			uni.request({
				url: 'https://www.kuaikanmanhua.com/v2/pweb/home',
				success: (res) => {
					console.log(res.data)
					this.banners = res.data.data.banners
					this.Tuijian = res.data.data.discovery_modules
					this.fllist = res.data.data.categories
				}
			})
			//endif

		},
		methods: {
			// 进入详情页
			goDetails(id) {
				console.log(id)
				uni.navigateTo({
					url: "../details/details?id=" + id
				})
			},
			goList(tagid) {
				uni.navigateTo({
					url: '../FlList/FlList?id=' + tagid
				})
			},
			fl() {
				this.flShow = !this.flShow
			},
			goSearch() {
				uni.switchTab({
					url: '../search/search'
				})
			}
		},

		//设置页面全屏
		onShow() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(true);
			// #endif
		},
		//如果不加这句，会导致跳转到别的页面后也是全屏
		onUnload() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
		}
	}
</script>

<style>
	.content{
		padding: 90rpx 0;
	}
	.head {
		position: fixed;
		top: 0px;
		left: 0;
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		display: flex;
		justify-content: space-between;
		background-color: #ff5594;
		padding: 0 20rpx;
		z-index: 999;
	}

	.fl {
		position: fixed;
		top: 90rpx;
		left: 0;
		z-index: 99;
		background-color: rgb(255 85 148 / 85%);
		display: flex;
		justify-content: start;
		flex-wrap: wrap;
		padding: 20rpx;
		transition: all 1s;
	}

	.uni-tag {
		width: 17%;
		margin: 20rpx 10rpx;
	}
	.fl .uni-tag:nth-child(4n) {
		margin-right: 0 !important;
	}

	/deep/.uni-tag-text {
		color: #fff !important;
	}

	.primary-uni-tag--inverted {
		color: #ffffff;
		background-color: #ffffff00;
		border-width: 1px;
		border-style: solid;
		border-color: #ffffff;
	}

	.Hleft {
		width: 30%;
		height: 100%;
		font-size: 40rpx;
		font-weight: 700;
		color: #ffffff;
	}

	.Hright {
		width: 25%;
		height: 100%;
	}

	.Hright image {
		width: 60rpx;
		height: 60rpx;
		margin: 16rpx 0 0 16rpx;
	}

	.banner {
		height: 420rpx;
		background-color: #eee;
	}

	swiper {
		height: 100%;
		width: 100%;
	}

	swiper-item {
		width: 100%;
		height: 100%;
	}

	swiper-item uni-image {
		width: 100%;
		height: 280px;
	}


	.tt {
		font-size: 32rpx;
		font-weight: 700;
		margin: 20rpx;
		color: #ff557f;
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.tt image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: top;
		margin-right: 10rpx;
	}

	.tjCon {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding:0 20rpx;
	}

	.tjCon .item {
		width: 48%;
		margin-top: 40rpx;
	}

	.tjCon .item image {
		width: 100%;
		height: 200rpx;
	}

	.tjCon .item .txt .t1 {
		font-size: 28rpx;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tjCon .item .txt .info {
		font-size: 24rpx;
		color: #a3a3a3;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 6rpx;
	}
</style>
